<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-11-04 19:44:48
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-24 15:12:13
 * @FilePath: /nhw/src/views/Profile/Points.vue
-->
<template>
  <Layout class="points-container" title="积分记录" border>
    <div class="heard">
      <span class="points-total"> {{ total }} </span>
      <span class="points-text"> 积分总额</span>
    </div>
    <Tabs v-model="active" sticky :offset-top="$store.state.navHeight">
      <Tab title="积分收支明细" name="a">
        <div class="btn-wrap">
          <ul>
            <li @click="getNum(0)">全部</li>
            <li @click="getNum(1)">已获取</li>
            <li @click="getNum(2)">已使用</li>
          </ul>
          <div
            class="back-wrap"
            :style="{ transform: 'translateX(' + num * 100 + '%)' }"
          >
            <span class="back"></span>
          </div>
        </div>
        <div
          class="record-wrap"
          v-for="(item, index) in pointList"
          :key="'pointList' + item.consDtm + index"
          v-show="num != 2 || (num == 2 && item.sumConsPoint < 0)"
        >
          <div class="record-title">
            <i class="dtm">{{ item.consDtm }} </i>
            <span v-show="num == 0">
              获取<i>{{ item.sumObtainPoint }} </i>
            </span>
            <span v-show="num == 0">
              已使用<i>{{ Math.abs(item.sumConsPoint) }} </i>
            </span>
          </div>

          <div
            v-for="(point, index) in item.pointDetail"
            :key="'point' + item.consDtm + index"
            class="record"
            v-show="
              num === 0 ||
              (num === 1 && point.oprPoint > 0) ||
              (num === 2 && point.oprPoint < 0)
            "
          >
            <div class="left">
              <div class="recodr-name">{{ point.oprStyle }}</div>
              <div class="record-time">{{ point.oprDtm }}</div>
            </div>
            <span class="right">{{ point.oprPoint }}</span>
          </div>
        </div>
        <Skeleton title :row="5" animate v-show="!isLoaded_point" />
      </Tab>
      <Tab title="积分兑换记录" name="b">
        <div
          class="record-wrap"
          v-for="item in consList"
          :key="'cons' + item.recordDtm"
        >
          <div class="record-title">
            <i class="dtm">{{ item.recordDtm }}</i>
          </div>
          <div
            class="record"
            v-for="(cons, index) in item.consDetail"
            :key="cons.firstDtm + index"
          >
            <div class="left">
              <div class="recodr-name">{{ cons.opePrizeNam }}</div>
              <div class="record-time">{{ cons.firstDtm }}</div>
            </div>
            <span class="right">{{ -cons.opePoint }}</span>
          </div>
        </div>
        <Skeleton title :row="5" animate v-show="!isLoaded_cons" />
      </Tab>
    </Tabs>
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import { Tab, Tabs, Skeleton } from "vant";
import { getPointTotalList, getConsPointRecordList } from "@/api/profile.js";
export default {
  name: "Points",

  components: { Layout, Tab, Tabs, Skeleton },

  computed: {},

  data() {
    return {
      isLoaded_point: false,
      isLoaded_cons: false,
      orgNo: "",
      active: "a",
      num: 0,
      total: 0,
      pointList: [],
      consList: [],
    };
  },
  created() {
    this.orgNo = window.localStorage.getItem("orgNo");
    this.getPointTotalList();
    this.getConsPointRecordList();
  },
  mounted() {},

  methods: {
    getNum(data) {
      if (data != this.num) {
        this.num = data;
      }
    },
    getPointTotalList() {
      getPointTotalList({ orgNo: this.orgNo }).then((res) => {
        this.total = res.param.surPoint;
        this.pointList = res.value;
        this.pointListClone = res.value;
        this.isLoaded_point = true;
      });
    },
    getConsPointRecordList() {
      getConsPointRecordList({ orgNo: this.orgNo }).then((res) => {
        this.consList = res.value;
        this.isLoaded_cons = true;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/var.less");
.points-container {
  padding: 0 10px;
  box-sizing: border-box;
  .heard {
    width: 100%;
    height: 230px;
    background: @primary;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    margin: 0 auto;
    .points-total {
      color: #fff;
      font-size: 46px;
      font-weight: bold;
    }
    .points-text {
      font-size: 28px;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 20px;
    }
  }

  .record-wrap {
    width: 98%;
    margin: 10px auto 20px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    .record-title {
      color: @gray;
      line-height: 1.5;
      font-size: 28px;
      i {
        color: @primary;

        &.dtm {
          color: inherit;
        }
      }
    }
    .record {
      display: flex;
      align-items: center;
      padding-top: 20px;
      & + .record {
        border-top: 1px solid rgba(0, 0, 0, 0.2);
      }
      .left {
        flex: 1;
        .recodr-name {
          color: #000;
          font-size: 30px;
          font-weight: bold;
        }
        .record-time {
          font-size: 28px;
          color: @gray;
          line-height: 1.8;
        }
      }
      .right {
        text-align: center;
        width: 20%;
        color: @primary;
        font-size: 28px;
      }
    }
  }

  .btn-wrap {
    position: relative;
    width: 100%;
    height: 60px;
    background: #eee;
    border-radius: 10px;
    padding: 4px 0;
    margin-top: 10px;
    ul {
      display: flex;
      justify-content: center;
      li {
        flex: 1;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        position: relative;
        z-index: 1;
      }
    }
    .back-wrap {
      position: absolute;
      width: 33.33%;
      top: 0;
      height: 100%;
      transition: transform 0.5s;
      span.back {
        display: block;
        width: 90%;
        background: #fff;
        border-radius: 10px;
        height: 54px;
        margin: 7px auto;
      }
    }
  }
}

/deep/ .van-tabs__line {
  background-color: transparent;
  background-image: linear-gradient(90deg, #e0680f, #e68840);
}
</style>